<template>
  <div class='header' v-if='order.statusDto'>
    <div class='top'>
      <div class='top1'>
        <div class='text'>
          <span>{{ order.statusDto.msg }}</span>
        </div>
        <van-cell class='address'>
          <template #title>
            <span class='custom-title'>{{ order.realName }}</span>
            <span class='custom-tite' style='margin-left: 8px;'>{{ order.userPhone }}</span>
          </template>
          <template #label>
            <span class='custom-title'>{{ order.userAddress }}</span>
          </template>
        </van-cell>
      </div>

    </div>
    <van-cell title='订单状态' :value='order.statusDto.title' />
    <template v-for='(item,index) in order.cartInfo'>
      <van-card :num='item.cartNum' :desc='item.productInfo.storeInfo' :title='item.productInfo.storeName'
                :thumb='imgUrls+item.productInfo.image'>
        <template #price>
          <font size='3' color='#ED6A0C'>￥</font>
          <font size='4' color='#ED6A0C'>{{ item.productInfo.attrInfo.price }}</font>
        </template>
        <template #tags>
          <van-tag plain type='danger'>{{ item.productInfo.attrInfo.sku }}</van-tag>
        </template>
      </van-card>
    </template>
    <van-cell title='快递' :value='order.deliveryName' />
    <van-cell title='订单号' :value='order.orderId' />
    <van-cell title='下单时间' :value='order.payTime' />
    <van-cell title='运费' :value="order.payPostage==0?'免运费':order.payPostage" />
    <van-cell title='优惠' :value="order.payPostage==0?'无优惠':order.couponPrice" />
    <van-cell title='总金额' :value='order.payPrice' />
    <van-cell title='支付方式' :value='order.statusDto.payType' />
  </div>
</template>

<script>
import { order } from '@/api/order.js'

export default {
  data() {
    return {
      imgUrls: this.$baseApi,
      order: {}
    }
  },
  created() {
    this.getOrder()
  },
  methods: {
    getOrder() {
      order(this.$route.query.key).then(res => {
        this.order = res.data
      })
    }
  }
}
</script>

<style scoped>
.top {
  height: 150px;
}

.top1 {
  background-image: url(../../../static/userBg.png);
  position: relative;
}

.text {
  text-align: center;
  line-height: 90px;
  font-size: 16px;
  color: #F0F0F0;
}

.address {
  bottom: -60%;
  position: absolute;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
</style>
